<template>
  <!--  推力球轴承-->
  <div style="height: 100%;width: 100%;overflow-x:auto;overflow-y:auto;">
    <a-row style="height: 100%">
      <a-col style="height: 100%;" :span="11">
        <p style="height: 3.5%;width: 100%;background-color: #D7D7D7">输入参数</p>
        <div class="basic-parameters" style="width: 100%;height: 60%;">
          <p style="height: 4%;width: 100%;background-color: #EAEAEA">基本参数</p>
          <p style="display: inline-block;height: 4%;width: 15%;text-align: center;">载荷类型</p>
          <select v-model="params_32.load_type" style="display: inline-block;height: 4%;width: 13%">
            <option value="1" >极限载荷</option>
            <option value="2" >疲劳载荷</option>
          </select>
          <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
          <button style="display: inline-block;height: 5%;width: 100%;margin-left: 4%;" v-show="params_32.load_type==1">导入轴承极限载荷</button>
          </a-upload>
          <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
          <button style="display: inline-block;height: 5%;width: 100%;margin-left: 4%;" v-show="params_32.load_type==2">导入轴承疲劳载荷</button>
          </a-upload>
          <div class="table-1" style="width: 98%;height: 23%;overflow-y:auto;margin-left: 2%" v-show="params_32.load_type==1">
            <p style="width: 100%;height: 20%;font-size: 12px">注:载荷文件为.xls或.xlsx格式,其各列参数如下表所示(无需表头)</p>
            <table style="border-radius:3px;text-align: center;width: 100%;height: 80%;">
              <tr style="width: 100%;font-size: 12px;background-color: #EAEAEA;">
                <th>序号</th>
                <th>Fx(N)</th>
                <th>Fy(N)</th>
                <th>Fz(N)</th>
                <th>My(Nm)</th>
              </tr>
              <tr class="tbody" v-for="(item,index) in spectrum_n" :key="index">
                <td>{{item[0]}}</td>
                <td>{{item[1]}}</td>
                <td>{{item[2]}}</td>
                <td>{{item[3]}}</td>
                <td>{{item[4]}}</td>
              </tr>
            </table>
          </div>
          <div class="table-1" style="width: 98%;height: 23%;overflow-y:auto;overflow-x:auto;margin-left: 2%" v-show="params_32.load_type==2">
            <p style="width: 100%;height: 25%;font-size: 12px">注:载荷文件为.xls或.xlsx格式,其各列参数如下表所示</p>
            <table style="border-radius:3px;text-align: center;width: 120%;height: 75%;">
              <tr style="width: 100%;font-size: 12px;background-color: #EAEAEA;">
                <th>序号</th>
                <th>Fx(N)</th>
                <th>Fy(N)</th>
                <th>Fz(N)</th>
                <th>Mx(Nm)</th>
                <th>My(Nm)</th>
                <th>时间占比</th>
              </tr>
              <tr class="tbody" v-for="(item,index) in spectrum_n" :key="index">
                <td>{{item[0]}}</td>
                <td>{{item[1]}}</td>
                <td>{{item[2]}}</td>
                <td>{{item[3]}}</td>
                <td>{{item[4]}}</td>
                <td>{{item[5]}}</td>
                <td>{{item[6]}}</td>
              </tr>
            </table>
          </div>

          <div style="height: 65%;width: 100%;position: relative;margin-top: 1%">
            <div class="left-div" >
              <div  style="width: 50%;height: 100%;display: inline-block;vertical-align: top">
                <ul class="left-li" style="width: 100%;height: 100%">
                  <li >轴承内径(mm)</li>
                  <li>轴承外径(mm)</li>
                  <li>滚动体直径(mm)</li>
                  <li>滚动体个数</li>
                  <li>内圈沟曲率半径系数</li>
                  <li>外圈沟曲率半径系数</li>
                  <li>轴向游隙(um)</li>
                  <li v-show="params_32.load_type==1">轴承转速(rpm)</li>
                </ul>
              </div>
              <div style="display: inline-block;height: 100%;width: 50%;vertical-align: top" >
                <ul class="left-input" style="width: 100%;height: 100%">
                  <li ><input v-model="params_32.d" /></li>
                  <li ><input v-model="params_32.D" /></li>
                  <li><input v-model="params_32.Dw" /></li>
                  <li><input v-model="params_32.Z" /></li>
                  <li><input v-model="params_32.fi" /></li>
                  <li><input v-model="params_32.fe"/></li>
                  <li><input v-model="params_32.radial_clearance"/></li>
                  <li v-show="params_32.load_type==1"><input v-model="params_32.speed"/></li>
                </ul>
              </div>
            </div>
            <div class="right-div" >
              <div  style="width: 50%;height: 100%;display: inline-block;vertical-align: top">
                <ul class="right-li" style="height: 100%;width: 100%">
                  <li >轴承外圈弹性模量(MPa)</li>
                  <li >轴承外圈泊松比</li>
                  <li>滚动体弹性模量(MPa)</li>
                  <li>滚动体泊松比</li>
                  <li>轴承内圈弹性模量(MPa)</li>
                  <li>轴承内圈泊松比</li>
                  <li>轴承额定动载荷(N)</li>
                  <li>轴承额定静载荷(N)</li>
                </ul>
              </div>
              <div style="display: inline-block;height: 100%;width: 50%;vertical-align: top" >
                <ul class="right-input" style="width: 100%;height: 100%">
                  <li ><input v-model="params_32.E_e"/></li>
                  <li ><input v-model="params_32.v_e"/></li>
                  <li><input v-model="params_32.E_b"/></li>
                  <li><input v-model="params_32.v_b"/></li>
                  <li><input v-model="params_32.E_i"/></li>
                  <li><input v-model="params_32.v_i"/></li>
                  <li><input v-model="params_32.C"/></li>
                  <li><input v-model="params_32.C0"/></li>
                </ul>
              </div>

            </div>

          </div>
        </div>
        <div class="correction-parameters" style="width: 100%;height: 28%;">
          <p style="height: 10%;width: 100%;background-color: #EAEAEA">修正参数</p>
          <div style="width: 100%;height: 90%;display: flex;margin-top: 2%">
            <div style="width: 45%;height: 100%;display: flex;  ">
              <div style="width: 45%;height: 100%">
                <ul class="bottom_text" style="height: 100%;width: 100%">
                  <li>轴承疲劳极限载荷(N)</li>
                  <li>可靠度(%)</li>
                  <li>清洁度条件</li>
                  <li>
                    <label v-show="params_32.contamination_condition==1">润滑方式</label>
                    <label v-show="params_32.contamination_condition==2">污染系数</label>
                  </li>
                  <li v-show="params_32.contamination_condition==1">清洁度等级</li>
                </ul>
              </div>
              <div style="width: 50%;height: 100%">
                <ul class="bottom_input" style="height: 100%;width: 100%">
                  <li><input  :disabled="input.fatigueload_limit_input==2" v-model="params_32.Cu" type="text"></li>
                  <li>
                    <select v-model="params_32.reliability">
                      <option value="1">90</option>
                      <option value="2">95</option>
                      <option value="3">96</option>
                      <option value="4">97</option>
                      <option value="5">98</option>
                      <option value="6">99</option>
                      <option value="7">99.2</option>
                      <option value="8">99.4</option>
                      <option value="9">99.6</option>
                      <option value="10">99.8</option>
                      <option value="11">99.9</option>
                      <option value="12">99.92</option>
                      <option value="13">99.94</option>
                      <option value="14">99.95</option>
                    </select>
                  </li>
                  <li>
                    <select v-model="params_32.contamination_condition">
                      <option value="1">润滑油纯净度按ISO4406已知</option>
                      <option value="2">只大体知道清洁度等级</option>
                    </select>
                  </li>
                  <li>
                    <select v-model="params_32.lubricate_method" v-show="params_32.contamination_condition==1">
                      <option value="1">油润滑，在线过滤</option>
                      <option value="2">油润滑，离线过滤或未过滤</option>
                      <option value="3">脂润滑</option>
                    </select>
                    <input v-model="params_32.e_C_s" v-show="params_32.contamination_condition==2"/>
                  </li>
                  <li>
                    <select v-model="params_32.contamination_level" v-show="params_32.contamination_condition==1">
                      <option value="1">-/13/10,-/12/10,-/11/9,-/12/9</option>
                      <option value="2">-/15/12,-/14/12,-/16/12,-/16/13</option>
                      <option value="3">-/17/14,-/18/14,-/18/15,/19/15</option>
                      <option value="4">-/19/16,-/18/16,-/20/17.-21/17</option>
                      <option value="5">-/21/18,-/21/19,-/22/19, -/23/19</option>
                    </select>
                  </li>
                </ul>
              </div>
            </div>
            <div style="width: 8%;height: 100%;">
              <div style="height: 10%;width: 100%">
                <input v-model="input.fatigueload_limit_input" style="width: 12px;height:12px;font-size: 16px;" type="radio" value="1">手动
              </div>
              <div style="height: 10%;width: 100%;margin-top: 20%">
                <input v-model="input.fatigueload_limit_input"  value="2" style="width: 12px;height:12px;font-size: 16px" type="radio">自动
              </div>
            </div>

            <div style="width: 47%;height: 100%;display: flex;">
              <div style="width:55%;height: 100%">
                <ul class="bottom_text"  style="height: 100%;width: 100%">
                  <li>润滑油40°C粘度(mm^2/s)</li>
                  <li>润滑油100°C粘度(mm^2/s)</li>
                  <li>润滑油工作温度(C)</li>
                  <li>是否添加极压润滑剂</li>
                </ul>
              </div>
              <div style="width: 45%;height: 100%">
                <ul class="bottom_input" style="height: 100%;width: 100%">
                  <li><input v-model="params_32.v_40"/></li>
                  <li><input v-model="params_32.v_100"/></li>
                  <li><input v-model="params_32.oil_temperature"/></li>
                  <li>
                    <select v-model="params_32.pp4">
                      <option value="1">否</option>
                      <option value="2">是</option>
                    </select>
                  </li>
                </ul>
              </div>
            </div>
          </div>


        </div>
      </a-col>
      <a-col style="height: 100%;" span="13">
        <p style="height: 3.5%;width: 100%;background-color: #D7D7D7">输出参数</p>
        <div class="top" style="height: 30%;width: 100%;">
          <p style="height:8.7%;width: 100%;background-color: #EAEAEA">结果汇总</p>
          <div  style="height: 45.65%;width: 100%;vertical-align: top;font-size: 0;">
            <div style="height: 100%;width: 20%;text-align: center;display: inline-block;font-size: 14px;vertical-align: top">
              <div style="height: 48%"></div>
              <div style="height: 52%"><label style="padding-top: 50%">寿命与静强度计算结果</label></div>
            </div>
            <div class="table-top" style="display: inline-block;overflow-y:auto;overflow-x:auto;height: 100%;width:70%;font-size: 14px" v-show="params_32.load_type==1">
              <table style="height: 100%;width: 150%;">
                <tr style="width: 100%;background-color: #EAEAEA;">
                  <th>序号</th>
                  <th>可靠度修正系数a1</th>
                  <th>寿命修正系数aISO</th>
                  <th> L10寿命(hr)</th>
                  <th> Lnm寿命(hr)</th>
                  <th>L10r寿命(hr)</th>
                  <th>Lnmr寿命(hr)</th>
                  <th>当量静载荷(N)</th>
                  <th>静强度安全</th>
                </tr>
                <tr style="text-align: center" v-for="(item,index) in ans.result_life_spectrum" :key="index">
                  <th>{{item[0]}}</th>
                  <th>{{item[1]}}</th>
                  <th>{{item[2]}}</th>
                  <th>{{item[3]}}</th>
                  <th>{{item[4]}}</th>
                  <th>{{item[5]}}</th>
                  <th>{{item[6]}}</th>
                  <th>{{item[7]}}</th>
                  <th>{{item[8]}}</th>
                </tr>
              </table>
            </div>
            <div class="table-top" style="display: inline-block;overflow-y:auto;height: 100%;width:70%;font-size: 14px" v-show="params_32.load_type==2">
              <table style="height: 100%;width: 100%;">
                <tr style="width: 100%;background-color: #EAEAEA;">
                  <th> L10寿命(hr)</th>
                  <th> Lnm寿命(hr)</th>
                  <th>L10r寿命(hr)</th>
                  <th>Lnmr寿命(hr)</th>
                </tr>
                <tr style="text-align: center" v-for="(item,index) in ans.life_fatigue_total" :key="index">
                  <th>{{item[0]}}</th>
                  <th>{{item[1]}}</th>
                  <th>{{item[2]}}</th>
                  <th>{{item[3]}}</th>
                </tr>
              </table>
            </div>
          </div>
          <div class="table-btn" style="height: 45.65%;width: 100%;">
            <div style="width: 50%;height: 100%;display: inline-block">
              <div style="height: 100%;width: 30%;text-align: center;display: inline-block;font-size: 14px;vertical-align: top">
                <div style="height: 40%"></div>
                <div style="height: 60%"><label style="padding-top: 50%">内圈最大接触应力(MPa)</label></div>
              </div>
              <div class="table-top" style="display: inline-block;overflow-y:auto;overflow-x:auto;height: 85%;width:60%;font-size: 14px;margin-top: 2%">
                <table style="height: 100%;width: 100%;">
                  <tr style="width: 100%;background-color: #EAEAEA;">
                    <th>序号</th>
                    <th>应力(MPa)</th>
                  </tr>
                  <tr style="text-align: center" v-for="(item,index) in ans.n_max_spectrum" :key="index">
                    <th>{{item[0]}}</th>
                    <th>{{item[1]}}</th>
                  </tr>
                </table>
              </div>
            </div>
            <div style="width: 50%;height: 100%;display: inline-block">
              <div style="height: 100%;width: 30%;text-align: center;display: inline-block;font-size: 14px;vertical-align: top">
                <div style="height: 40%"></div>
                <div style="height: 60%"><label style="padding-top: 50%">外圈最大接触应力(MPa)</label></div>
              </div>
              <div class="table-top" style="display: inline-block;overflow-y:auto;overflow-x:auto;height: 85%;width:60%;font-size: 14px;margin-top: 2%">
                <table style="height: 100%;width: 100%;">
                  <tr style="width: 100%;background-color: #EAEAEA;">
                    <th>序号</th>
                    <th>应力(MPa)</th>
                  </tr>
                  <tr style="text-align: center" v-for="(item,index) in ans.w_max_spectrum" :key="index">
                    <th>{{item[0]}}</th>
                    <th>{{item[1]}}</th>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="btn" style="height: 54%;width: 100%;">
          <p style="height:6%;width: 100%;background-color: #EAEAEA">中间结果</p>
          <div style="height: 79%;width: 100%;">
            <ul style="width: 100%;height: 100%">
              <li style="height: 27%;width: 100%;margin-top: 1%">
                <div style="height: 100%;width: 25%;text-align: center;display: inline-block;font-size: 14px;vertical-align: top">
                  <div style="height: 48%"></div>
                  <div style="height: 52%"><label style="padding-top: 50%">最大接触应力(MPa)</label></div>
                </div>
                <div class="table-top" style="display: inline-block;overflow-y:auto;overflow-x:auto;height: 100%;width:60%;font-size: 14px">
                  <table style="height: 100%;width: 100%;">
                    <tr style="height: 100%;width: 100%;background-color: #EAEAEA;">
                      <th>序号</th>
                      <th>滚动体序号</th>
                      <th>内圈</th>
                      <th>外圈</th>
                    </tr>
                    <tr style="text-align: center" v-for="(item,index) in ans.stress_all_spectrum" :key="index">
                      <th>{{item[0]}}</th>
                      <th>{{item[1]}}</th>
                      <th>{{item[2]}}</th>
                      <th>{{item[3]}}</th>
                    </tr>
                  </table>
                </div>
              </li>
              <li style="height: 27%;width: 100%;margin-top: 2%">
                <div style="height: 100%;width: 25%;text-align: center;display: inline-block;font-size: 14px;vertical-align: top">
                  <div style="height: 48%"></div>
                  <div style="height: 52%"><label style="padding-top: 50%">接触半宽(mm)</label></div>
                </div>
                <div class="table-top" style="display: inline-block;overflow-y:auto;overflow-x:auto;height: 100%;width:60%;font-size: 14px">
                  <table style="height: 100%;width: 100%;">
                    <tr style="height: 100%;width: 100%;background-color: #EAEAEA;">
                      <th>序号</th>
                      <th>滚动体序号</th>
                      <th>内圈</th>
                      <th>外圈</th>
                    </tr>
                    <tr style="text-align: center" v-for="(item,index) in ans.semi_minor_all_spectrum" :key="index">
                      <th>{{item[0]}}</th>
                      <th>{{item[1]}}</th>
                      <th>{{item[2]}}</th>
                      <th>{{item[3]}}</th>
                    </tr>
                  </table>
                </div>
              </li>
              <li style="height: 27%;width: 100%;margin-top: 2%">
                <div style="height: 100%;width: 25%;text-align: center;display: inline-block;font-size: 14px;vertical-align: top">
                  <div style="height: 48%"></div>
                  <div style="height: 52%"><label style="padding-top: 50%">滚动体法向载荷(N)</label></div>
                </div>
                <div class="table-top" style="display: inline-block;overflow-y:auto;overflow-x:auto;height: 100%;width:60%;font-size: 14px">
                  <table style="height: 100%;width: 80%;">
                    <tr style="height: 100%;width: 100%;background-color: #EAEAEA;">
                      <th>序号</th>
                      <th>滚动体序号</th>
                      <th>法向载荷(N)</th>
                    </tr>
                    <tr style="text-align: center" v-for="(item,index) in ans.qj_all_spectrum" :key="index">
                      <th>{{item[0]}}</th>
                      <th>{{item[1]}}</th>
                      <th>{{item[2]}}</th>
                    </tr>
                  </table>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <button @click="tclick_thrust" style="height: 5%;width:15%;background-color: #D7D7D7;margin-left: 10%;line-height: 0;font-size: 16px">计算</button>

      </a-col>
    </a-row>
  </div>
</template>

<script>


import {firedelete, firetext, thrust_ball_bearing} from "@/api/file";

export default {

  created() {
    document.title = '单向/双向推力球轴承滚动体受载与寿命计算'
    this.$store.state.file.key = 32 //设置key为自己的页面编号
  },
  name: "thrust_ball_bearing",
  data() {
    return {
      form2:{
        uuids:[]
      },
      input: {
        fatigueload_limit_input: 1,
      },
      params_32:this.$store.state.file.dataList[32],
      spectrum_n: [[1, 1286000, -9000, 0, 0, 0]],
      ans: {
        result_life_spectrum: [[]],
        life_fatigue_total: [[]],
        n_max_spectrum: [[]],
        w_max_spectrum: [[]],
        stress_all_spectrum: [[]],
        semi_minor_all_spectrum: [[]],
        qj_all_spectrum: [[]],
      }
    };
  },
  mounted(){
    //绑定页面退出事件
    window.onbeforeunload= (e)=>{
      e = e || window.event;
      if (e) {
        e.returnValue = '关闭提示';
      }
      this.delete()//调用自己的方法
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示';
    };
  },
  methods:{
    //删除载荷谱
    async delete(){
      this.form2.uuids=this.form2.uuids.toString();//将载荷谱文件数组转成字符串
      await firedelete(this.form2).then(res => {
        console.log(res);
      })
    },
    customRequest(data)
    {
      const formData = new FormData()
      formData.append('fileName', data.file)
      firetext(formData)
          .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
            console.log(res)
            this.spectrum_n=res.data.filedata;
            this.form2.uuids.push(res.data.uuid);
          })
          .catch(error => {
            console.log(error);
          });
    },

    tclick_thrust() {
      this.params_32.spectrum_n = this.spectrum_n.toString()
      thrust_ball_bearing(this.params_32)
          .then(res => {
            console.log(res);
            // if (res.code === 200) {
            this.ans = res;
            // }
          })
          .catch(error => {
            console.log(error);
          });

    },
  }
}
</script>

<style scoped>
table,th,td {
  border: 1px solid #D7D7D7;
}
.left-ul ul{
  display: inline-block;
}
.left-ul li{
  text-align: right;
  height: 7%;
  width: 100%;
}
.left-ul input{
  height: 80%;
  text-align: center;
  width: 40%;
}
.btn-ul li{
  text-align: right;
  height: 20%;
  width: 100%;
}
.btn-ul input{
  height: 80%;
  text-align: center;
  width: 40%;
  margin-right: 5%;
}
.btn-ul select{
  height: 80%;
  text-align: center;
  width: 40%;
  margin-right: 5%;
}
.table-top table,th,td{
  border: 1px solid #D7D7D7;
  text-align: center;
}
.left-div{
  position: absolute;
  width: 50%;
  height: 100%;
  left:0;
}
.right-div{
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
}
.left-li li{
  text-align: right;
  height:11%;
  width: 100%;

}
.left-input li{
  text-align: center;
  height: 11%;
  width: 100%;
}
.left-input input,select{
  text-align: center;
  height: 80%;


}
.right-li li{
  text-align: right;
  height: 11%;
  width: 100%;
}
.right-input li{
  text-align: center;
  height: 11%;
  width: 100%;
}
.right-input input{
  text-align: center;
  height: 80%;
}
.bottom_text li{
  height: 19%;
  width: 100%;
  text-align: right;
}
.bottom_input li{
  height: 19%;
  width: 100%;
  text-align: center;
}
.bottom_input input,select{
  height: 80%;
  width: 80%;
  text-align: center;
}
</style>